让开发更快更顺畅的 VS Code 插件推荐（一）
# 点击图片报名上海、南京源创会 #
Microsoft 推出的代码编辑器 Visual Studio Code 为开发者提供了许多实用的工具和插件扩展，大家可以根据自己的需求打造自己的编辑器。Visual Studio Code 定期更新插件扩展，你可以在它的 Marketplace 中寻找合适的工具、代码片段或其他内容以简化开发过程。
插件扩展是 Visual Studio Code 体验的一个重要组成部分，本文从 Marketplace 里面选出了 50 个值得大家一试的实用插件，以造福 VS Code 发烧友。下列插件全部免费，有些可能需要你安装额外的程序才能使用。当然，如果你有更好的推荐，欢迎留言分享。
1、TSLint
如果你对于你的 TypeScript 质量表示怀疑，你可以使用集成在 VS code 中的 tslint linter 进行检查。
主要特征：
☞ 检查静态 TypeScript 的代码质量。
☞ 分析整个项目或者某一个特定区域的代码。
☞ 当分析多行代码时，允许你自动修改错误。
☞ 支持自动修复 warning 类型的提醒。
☞ 需要 tslint (全局安装或者是局部安装)。
2、Auto Import
Auto Import 是 VS Code 的自动导入模块，它可以自动查找解析，并为每一次的导入提供代码操作和代码补全。 Auto Import 适用于 TypeScript 和 TSX（的自动补全）。
主要特征：
☞ 可轻松扫描大型项目中的代码
☞ 导入状态栏会显示可用的导入数
☞ 可从同一位置合并导入
3、Docker Support
Docker 是当今开发最热门的趋势之一，如果你使用 VS Code，就决不能错过 Docker Support。这是 Docker 的官方扩展，可帮助你创建 dockerflies，并为其添加语法高亮、命令和代码片段。
主要特征：
☞ 简化容器化应用的创建和启用
☞ 自动生成 dockerfile 和 docker-compose.yml
☞ Dockerfile 和 docker-compose 内置于命令调色板中
☞ 有语法高亮和 hover 提示
☞ Dockerfile 文件含有代码片段和 linting 功能
4、Visual Studio Keymap
快捷键不仅可以节省时间，而且能让你在编码时保持心情舒畅。它们非常受 Visual Studio 用户的欢迎，而这个扩展则可以让你在 VS Code 中使用自己最喜爱的 VS 快捷键。
主要特征：
☞ 提供传统的 Visual Studio 快捷键设置方案
☞ 可以轻松地添加自定义的快捷方式
☞ 将 Windows，Linux 和 Mac 的快捷方式引入到了 Visual Studio Code
☞ 可以在扩展的贡献列表中找到的所有快捷键方案
5、EditorConfig for VS Code
可以使用这个 Visual Studio Code 扩展来保持编码风格的一致。即使在你的团队中使用多中 IDE 和编辑器，也可以用针对 VS Code 的 EditorConfig 来实现一致性。 在其内部，EditorConfig 使用了 editorconfig npm 软件包，它是几个可用的 EditorConfig 核心之一。 你可以参考下 EditorConfig 的主网站。
主要特征：
☞ 它是 EditorConfig 面向 Visual Studio 官方发布的扩展
☞ 可以用来定义缩进，制表符以及行开始和结束位置的样式
☞ 拥有可以用来读取和遵循已经定义好了的样式规则的文本编辑器插件
☞ 使用了 editorconfig npm 软件包
6、Evermonkey
Evernote 是最受欢迎的笔记应用程序之一。它可以用于通过 Evermonkey 扩展来提高编码的质量和效率。这个方便的 Visual Studio Code 扩展能让 Evernote 支持 Markdown，与 Sublime Text 遵循相同的原则，但拥有更快速的体验。
主要特征：
☞ 检查静态 TypeScript 的代码质量。
☞ 分析整个项目或者某一个特定区域的代码。
☞ 当分析多行代码时，允许你自动修改错误。
☞ 支持自动修复 warning 类型的提醒。
☞ 需要 tslint (全局安装或者是局部安装)。
7、React Redux ES6 Snippets
你可以使用这个简单而实用的 VS Code 扩展来获取到使用了 ES6 的 React 和 Redux 的 JavaScript 代码片段，以帮助自己构建组件。
主要特征：
☞ 使用 JavaScript 提供代码片段
☞ 可以通过按下 Ctrl +空格 来快速地访问代码片段
☞ 拥有样板的辅助
8、Debugger for Chrome
得益于其强大的工具和技术，Chrome一直被开发人员广泛地使用着，在浏览器领域保持着最高的市场份额，它为开发人员的生活提供了诸多便利。 这个 VS Code 扩展程序可协助你在 Chrome 中调试 JavaScript，并提供了许多有用，省时的功能。
主要特征：
☞ 适用于支持 Chrome 调试协议的其它目标
☞ 当启用了源映射的时候，即使在源文件上也可以设置断点
☞ 可以对脚本标签以及 eval 脚本进行调试，只要它们添加了 added
☞ 支持本地的窗格，变量观察以及控制台
9、JSHint
JSHint 是一个可以在 JavaScript 代码中快速查找错误的优秀工具。如果你习惯了 JSHint，也可以在 Visual Studio Code 中来使用它，而这个扩展则使得这样的需求更容易实现。你可以在这个网站找到。
主要特征：
☞ 使用了网站上所描述的默认的 JSHint 配置
☞ 默认情况下，所有文件都包含在此扩展中
☞ 允许从检查中排除特定的文件和文件夹
☞ 拥有针对指定工作区禁用 JSHint 的选项
10、C#
有了这个扩展，就能为 .NET Core 写出优秀的 C＃ 代码，扩展由 OmniSharp 提供技术支持。它甚至可以帮助你进行代码调试，并且支持多种操作系统。 VS Code 旨在成为跨平台 C＃ 开发的得力工具，事实上，许多 Unity 游戏开发人员所使用的是 VS Code 而非 MonoDevelop IDE，这样就使得 C＃ 扩展成为许多开发人员手中特别有用的工具。
主要特征：
☞ 支持 .NET Core 的调试和轻量级开发工具
☞ 对 C＃ 的编辑器支持，包括语法高亮，IntelliSense，转到定义，查找所有引用等等
☞ C＃ 调试器可以在 Windows，Mac 还有许多的 Linux 操作系统上使用
11、TODO Parser
如果你没办法在项目的工作文件中解析 TODO，那么这个 Visual Studio Code 就可以帮到你。它可以解析多行 TODO，让你的工作流程更具可操作性。
主要特征：
☞ 当前文档的状态栏中会显示 TODO 计数器
☞ 计数器会提供所有可用的 TODO 清单
☞ 拥有一次解析单个或多个 TODO 的选项
☞ 支持所有的编程语言
12、PowerShell
PowerShell 是一种非常棒的面向对象编程语言。如果你使用这种编程语言，那么这个扩展就是必需的，它为 Visual Studio Code 提供了 PowerShell 语言支持。
主要特征：
☞ 在 VS Code 的类 IDE 界面中编写和调试 PowerShell 脚本
☞ 适用于 Windows，Linux 以及 iOS 等平台
☞ 提供了用来查找变量和 cmdlet 引用的工具
13、Angular 4 and TypeScript/HTML VS Code Snippets
使用这个 Visual Studio Code 扩展可以将 Angular（v2或更高版本），TypeScript 或 HTML 的代码片段添加到编辑器中。这是一个用法简单到令人难以置信的扩展，它能调高编码生产力。
主要特征：
☞ 可以添加 Angular 2 及以上版本，TypeScript 或者 HTML 的代码段
☞ 在描述中会同时针对 TypeScript 和 HTML 提供多个片段
☞ 立马就能提高编写 Angular 2 及以上版本代码的生产力
14、Sublime Text Keymap
Sublime Text 是一个优秀的文本编辑器，可用来编写代码。如果你已经习惯了 Sublime Text 的快捷键设置，并且希望在 VS 中也能使用它们，那么这个扩展能将最流行的 Sublime Text 快捷键设置引入 Visual Studio Code。
主要特征：
☞ 扩展是由微软官方发布并引入到了快捷键设置中
☞ 引入了编写代码时流行的 Sublime Text 快捷键设置
☞ 带来了可以在 Windows，Linux 和 Mac 上使用的快捷键设置
15、HTML CSS Class Completion
它跟 CSS 一样令人折服, 很难去记忆所有的CSS类。这个扩展可以根据工作区中的 CSS 文件自动补全你输入的 CSS 类名。
主要特征：
☞ 查找文件时，扩展自定义文件的目录
☞ 为类定义自动完成提供手动重新缓存
☞ 支持 PHP，Razor 和 Jade
16、View in Browser
如果你喜欢在浏览器中浏览 HTML 以查看反馈，那么 Visual Studio Code 扩展将帮助您完成此操作。 它会将 HTML 文件呈现在系统的默认浏览器中。
主要特征：
☞ 提供两个编辑选项，一个来自上下文菜单，另一个来自命令行
☞ 根据你的偏好设置默认浏览器
☞ 支持 Mozilla，Chrome，Internet Explorer 和 Safari
17、NgBootstrap Snippets
获取 NgBootstrap 片段，其中包含 Angular 和 Bootstrap 4 片段，并提供了有用的扩展。
主要特征：
☞ 键入 ngb 可以快速列出可用的片段
☞ 按 Enter 键，展开片段
☞ 提供告警，下拉列表，进度条和许多其他片段
18、jQuery Code Snippets
jQuery 是一个强大的 JavaScript 库，但你不可能记得其中每一个函数，而这个扩展可以帮你记住。 jQuery Code snippets 为 Visual Studio Code 带来了超过 130 个的 jQuery 代码片段。
主要特征：
☞ 输入'jq'后，提供所有代码段的速查列表
☞ 从匹配的元素中设置单个或多个属性
☞ 从 2015 Visual Studio jQuery Snippets 开始加入代码段
19、Bower
Bower 通过其软件包管理功能轻松构建应用程序，可在 VS 代码中访问大多数 Bower 命令。 通过 Bower Visual Studio 代码扩展，您可以轻松安装，卸载，搜索和更新软件包。
主要特征：
☞ IDE 中已经内置了 Bower 命令提示符
☞ 可以编写，安装和卸载 bower.json 和其他 Bower 包
☞ 根据你正在编辑的文件查找文件
20、Git History
Git 是当今最流行的版本控制系统。它支持针对现代网络应用程序进行分布式版本控制。有时，你会希望能够对代码进行跟踪，并且能回过头去查看之前的版本，还有就是恢复某个版本。 Git History 扩展为你提供了完整的 Git 历史记录，包括 Visual Studio Code 中本地文件的历史记录。
主要特征：
☞ 根据你的偏好用图表来展示历史记录
☞ 可以获得多个历史图表来创建比较视图
☞ 提供了键盘快捷键，方便你快速地浏览历史记录
21、Angular Files
脚手架可以说是构建应用程序重要的第一步，而要把它搭起来可能会很复杂。这个 Visual Studio 扩展让你可以快速地把搭建 Angular 文件模板。
主要特征：
☞ 支持非 Angular-cli 文件结构
☞ 还支持具有不同样式扩展的 angular-cli.json
☞ 为应用程序结构提供了良好的支持
22、Auto-Open Markdown Preview
由于需要重复输入“Ctrl + K V”或“Cmd + KV”，在平行窗口中预览 Markdown 文件可能会比较烦人。借助于这个 Visual Studio Code 扩展，可以自动预览已经打开的 Markdown 文件。
主要特征：
☞ 最新的版本支持 Visual Studio Code 1.10.0 及更高版本
☞ 省掉进行 Markdown 文件预览时需要按“Ctrl + K V”的必要
☞ 就在你打开的 Markdown 文件旁边显示预览
23、Angular v4 TypeScript Snippets
使用此 Visual Studio Code 扩展程序可以为你节省获取的代码片段的时间，它可以为你添加用于 TypeScript 的 Angular 和 HTML 代码片段。
主要特征：
☞ 适用于 Visual Studio 0.10.1 及更高版本
☞ 已针对 Angular v4.0.0 发行版进行了同步更新
☞ 可以使用快捷键在编辑器中激活代码块
24、ESLint
ESLint 通过将 ESLint 库引入 Visual Studio Code，以实现更好的代码质量。它还能帮助你识别 JavaScript 代码中的模式，并执行一些操作。
主要特征：
☞ 可以在打开的工作区文件夹中引入 ESLint 库
☞ 为 ESLint 用户提供了 ESLint 文档
☞ 如果代码库中没有文件，就搜索该文件的全局版本
25、Bracket Pair Colorizer
Bracket Pair Colorizer 是一个括弧着色器，如果不同的括弧会让你感到一团乱麻，这个 Visual Studio Code 扩展就能帮助你使用代码着色选项来匹配它们。你可以定义那些字符匹配指定的颜色。
主要特征：
☞ 允许对括弧中的字符进行自定义配置
☞ 列出可用的各种颜色，甚至单个括弧也可以对应一种颜色
☞ 括弧可添加或者从列表中删除
只要您于 5 月 12 日 24：00 前在“开源中国七大夏日必备编程神器，不容错过！”评论区留言，写下你用过最好的开源项目和项目地址，并说明为什么觉得最好，点赞数最多的前十名即可获得开源中国送出的编程神器一份哦！！！
这些开源软件养活了一票国产软件！